<template>
  <div
    class="box-border w-full h-full p-[40px] overflow-y-auto scrollbar scrollbar-thumb-gray-300"
    ref="modelRef"
  >
    <div class="grid grid-cols-4 gap-[40px]">
      <div
        class="box-border flex items-center justify-center cursor-pointer bg-white/50 rounded-[12px] border_white h-[260px] w-full"
        @click="uploadModel"
      >
        <div class="text-black text-[20px] font-bold flex items-center gap-[10px]">
          <img src="../assets/images/add.png" class="w-[14px] h-[14px]" />
          <span>上传模型</span>
        </div>
      </div>
      <div
        v-for="item in modelLists"
        :key="item.id"
        class="flex items-center justify-center bg-white/50 rounded-[12px] border_white box-border h-[260px] w-full"
      >
        <div class="w-full my-4">
          <div class="flex items-center justify-center gap-4">
            <img :src="modelLogo" class="w-8 h-8" />
            <span class="text-[20px] font-bold">{{ item.model_cname }}</span>
          </div>
          <div class="mt-4 text-[18px] flex justify-center">
            <div class="space-y-2">
              <div>· 创建时间：{{ item.create_time }}</div>
              <div>· 目标数量：{{ item.targets.length }}</div>
            </div>
          </div>
          <div class="flex justify-center mt-8">
            <el-button type="primary" plain class="!w-[90%] !h-[48px]" @click="goModelInfo(item.id)"
              >查看</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="flex justify-end mt-8">
      <el-pagination
        :hide-on-single-page="isHidePager"
        background
        layout="total,prev, pager,next,jumper"
        :total="total"
        :page-size="12"
        :current-page="curPageNum"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import modelLogo from '../assets/images/model_logo.png'
import { getModelList } from '@/api/model'
import { formatCreateTime } from '@/utils/dateFormat'

// 输出：2025-01-16 15:40:49

const modelRef = ref(null)
const router = useRouter()
// const curPageNum = ref(1)
// const total = ref(11)

// const handleCurrentChange = (page) => {
//   console.log('🐯 ~ handleCurrentChange ~ page:', page)
//   curPageNum.value = page
//   modelRef.value.scrollTo({
//     top: 0,
//     behavior: 'smooth',
//   })
// }
// const isHidePager = computed(() => {
//   return total.value <= 12
// })

const uploadModel = () => {
  router.push('/model')
}
const goModelInfo = (id) => {
  console.log('🐯 ~ goModelInfo ~ id:', id)
  router.push({
    path: '/model_info',
    query: {
      id,
    },
  })
}
const modelLists = ref([])
const getModeLists = async () => {
  const res = await getModelList()
  console.log('🐯 ~ getModeLists ~ res:', res)
  modelLists.value = res.data.map((item) => ({
    ...item,
    create_time: formatCreateTime(item.create_time),
  }))
}
getModeLists()
</script>

<style scoped></style>
